<template>
  <div class="actbody">
    <van-pull-refresh
      v-model="isLoading"
      @refresh="onRefresh"
      class="pullrefresh"
    >
      <!-- 大屏活动 -->
      <div class="firstactbox">
        <div class="imgbox">
          <img v-lazy="firstActivity.imgurl" alt="" class="img" />
        </div>
        <div class="infobox">
          <div class="title">
            {{ firstActivity.title }}
          </div>
          <div class="goto">点击查看</div>
        </div>
      </div>
      <div
        class="otheractbox"
        v-for="(item, index) in actvitylist"
        :key="index"
      >
        <div class="imgbox">
          <img v-lazy="item.imgurl" alt="" class="img" />
        </div>
        <div class="infobox">
          <div class="title">
            {{ item.title }}
          </div>
          <div class="content">
            {{ item.content }}
          </div>
          <div class="goto">点击查看</div>
        </div>
      </div>
    </van-pull-refresh>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isLoading: false,
      firstActivity: {
        imgurl: "https://img01.yzcdn.cn/vant/apple-1.jpg",
        title: "第一届桌球比赛",
        begintime: "",
        endtime: "",
        content: "",
        otherimg: [""],
      },
      actvitylist: [
        {
          imgurl: "https://img01.yzcdn.cn/vant/apple-1.jpg",
          title: "第二届桌球比赛",
          begintime: "",
          endtime: "",
          content: "第二届桌球比赛第二届桌球比赛第二届桌球比赛第二届桌球比赛",
          otherimg: [""],
        },
        {
          imgurl: "https://img01.yzcdn.cn/vant/apple-1.jpg",
          title: "第二届桌球比赛",
          begintime: "",
          endtime: "",
          content: "第二届桌球比赛第二届桌球比赛第二届桌球比赛第二届桌球比赛",
          otherimg: [""],
        },
        {
          imgurl: "https://img01.yzcdn.cn/vant/apple-1.jpg",
          title: "第二届桌球比赛",
          begintime: "",
          endtime: "",
          content: "第二届桌球比赛第二届桌球比赛第二届桌球比赛第二届桌球比赛",
          otherimg: [""],
        },
      ],
    };
  },
  methods: {
    onRefresh() {
      setTimeout(() => {
        this.isLoading = false;
      }, 1000);
    },
  },
};
</script>

<style scoped>
.actbody {
  height: calc(100vh - 200px);
  background-color: #f7f8fa;
}
.pullrefresh{
  height: calc(100vh - 200px);
}
.firstactbox {
  width: 90%;
  margin: 0 auto;
  background-color: #fff;
  border-radius: 8px;
}
.firstactbox .imgbox .img {
  width: 100%;
  height: 200px;
}
.firstactbox .infobox {
  display: flex;
  justify-content: space-between;
  padding: 10px;
}
.firstactbox .infobox .title {
  font-size: 20px;
  font-weight: 600;
}
.firstactbox .infobox .goto {
  font-size: 20px;
  color: rgb(255, 132, 0);
}
.otheractbox {
  width: 90%;
  height: 120px;
  margin: 10px auto;
  background-color: #fff;
  border-radius: 8px;
  display: flex;
  align-items: center;
  flex: 3;
}
.otheractbox .imgbox {
  flex: 1;
}
.otheractbox .imgbox .img {
  width: 100%;
}
.otheractbox .infobox {
  padding: 10px;
  flex: 2;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
}
.otheractbox .infobox .title {
  font-size: 18px;
  font-weight: 550;
}
.otheractbox .infobox .content {
  font-size: 16px;
}
.otheractbox .infobox .goto {
  font-size: 16px;
  color: rgb(255, 132, 0);
  align-self: flex-end;
}
</style>